<template>
	<view class="feedback">
		<view class="swiper-fankui">
			<view class="card" >
				<uni-card :is-shadow="false" :border="false" :margin="'20rpx'" :spacing="'20rpx 40rpx'" :padding="0">
					<view class="c-box">
						<text class="c-b-text">投诉类型</text>
						<picker style="flex: 1;" @change="onchange" value="valiFormData.type" :range="array">
							<view class="picker">
								<view class="uni-input" :class="array[valiFormData.type] == ''?'uni-input1':''">{{array[valiFormData.type] == ""?"请选择投诉类型":array[valiFormData.type]}}</view>
								<uni-icons type="bottom" color="#5e6d82" :size="'28r'" />
							</view>
						</picker>
					</view>
					
				</uni-card>
				<uni-card  title="留言内容" :extra="lens+'/200'" :is-shadow="false" :border="false" :margin="'20rpx'" :spacing="'0 40rpx'" :padding="0">
					<uni-forms ref="valiForm" :recruits="rules" :modelValue="valiFormData">
					<uni-forms-item name="content">
						<uni-easyinput :clearable="false" type="textarea" maxlength="200" class="p-input" :inputBorder="false" focus v-model="valiFormData.content" placeholderStyle="font-size: 28rpx" placeholder="请输入您要反馈的问题，感谢您的支持～"></uni-easyinput>
					</uni-forms-item>
					<uni-forms-item label="反馈图片" required name="image" style="display: none;">
						<uni-easyinput :clearable="false" :inputBorder="false" v-model="valiFormData.image" placeholder="请输入反馈图片" trim="both" />
					</uni-forms-item>
					<uni-forms-item label="选择类型" required name="type" style="display: none;">
						<uni-easyinput :clearable="false" :inputBorder="false" v-model="valiFormData.type" placeholder="请输选择类型" trim="both" />
					</uni-forms-item>
					<uni-forms-item label="订单id" required name="order_id" style="display: none;">
						<uni-easyinput :clearable="false" :inputBorder="false" v-model="valiFormData.order_id" placeholder="请输输入订单id" trim="both" />
					</uni-forms-item>
					</uni-forms>
				</uni-card>
				
				<uni-card title="图片（选填、提供问题截图）" :is-shadow="false" :border="false" :margin="'20rpx'" :spacing="'0 40rpx'" :padding="0">
				    <view class="img">
							<uni-grid v-if="fileLists.length" :column="4" :showBorder="false" @change="addImg">
								<uni-grid-item  :key="index" v-for="(item,index) in fileLists">
									<image mode="scaleToFill" :src="item" style="width: 100%;height: 100%;" ></image>
								</uni-grid-item>
							</uni-grid>
							<uni-grid v-else :column="4" :showBorder="false" @change="addImg">
								<uni-grid-item>
								<image class="main-img" mode="aspectFit" :src="imgUrl1" ></image>
								</uni-grid-item>
							</uni-grid>
					</view>
				</uni-card>
			</view>
			<view class="pay-but">
				<button class="but" plain @click="addClick('valiForm')">提交</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
				imgUrl1:`${getApp().globalData.imgScr}jd/xiangji.png`,
				array:[], // 下拉选择框的内容
				valiFormData:{
					order_id:'', // 订单id
					content:'', // 反馈类容
					image:'', // 反馈图片
					type:0, // 
				},
				// 校验规则
				rules: {
					content: {
						recruits: [{
							required: true,
							errorMessage: '意见不能为空'
						}]
					},
					type: {
						recruits: [{
							required: true,
							errorMessage: '请选择投诉类型'
						},{
							minimum:1,
							errorMessage: '请选择投诉类型'
						}]
					},
					},
				fileLists:[], // 图片上传 回显的数据列表
			};
		},
		onLoad(res) {
			if(res.id) this.valiFormData.order_id = res.id
			this.getType()
		},
		methods: {
			/**
			 * 下拉选择值发生变化时触发
			 * @param {Object} e 下拉选择的数据
			 */
			onchange(e){
				this.valiFormData.type = e.detail.value * 1
			},
			/**
			 * 上传图片
			 * @param {Object} e 点击宫格获取宫格对应的数据
			 */
			addImg(e) {
				let _this = this
				uni.chooseImage({
				    success: (chooseImageRes) => {
				        // 获取的格式是数组，多选会同时返回，单选只返回一项
						if(chooseImageRes.tempFiles[0].size > 1024 * 1024 * 10) return uni.showToast({
									title: '请选择 10M 以内的图片！',
									icon:"none"
								})
				        const tempFilePaths = chooseImageRes.tempFilePaths;
						_this.fileLists = tempFilePaths
				        // // 若多选，需循环调用uni.uploadFile ，因微信小程序只支持单文件上传
				        uni.uploadFile({
				            // url: 'https://www.zhuoxianrenli.cn/index/hotelindex/uploadImage', //仅为示例，非真实的接口地址
				            url: `${getApp().globalData.url}index/hotelindex/uploadImage`, //仅为示例，非真实的接口地址
				            filePath: tempFilePaths[0],
				            name: 'file',
						header: {
						"Content-Type": "multipart/form-data",
						},
				            success: (uploadFileRes) => {
				                // 根据接口具体返回格式   赋值具体对应url
								_this.valiFormData.image = JSON.parse(uploadFileRes.data).file
				            },
							fail:(e) => {
								uni.showToast({
									title: e.errMsg,
									icon:"none"
								})
							}
				        });
				    }
				});
			},
			async addClick(ref) {
				let _this = this
				try {
					let res = await this.$refs[ref].validate()
					let data = await this.$http.post('/index/Hotelorder/add_complaint',res)
					uni.navigateBack({
						delta: 1
					});
				}catch (err) {
					if(err.length > 0) {
						uni.showToast({
							title: err[0].errorMessage,
							icon:"none"
						})
					} else if(err.errMsg){
						uni.showToast({
							title: err.errMsg,
							icon:"none"
						})
					}
				}
			},
			/**
			 * 请求下拉选择框的内容
			 */
			async getType() {
				try{
					let res = await this.$http.get('/index/Communal/complaint_type')
					this.array = res
				}catch(e){
					//TODO handle the exception
					uni.showToast({
						title: e.errMsg,
						icon:"none"
					})
				}
			}
		},
		computed:{
			lens: function() {
				return this.valiFormData.content.length
			}
		}
	}
</script>

<style lang="scss">
	.feedback {
		flex: 1;
		flex-direction: column;
		overflow: hidden;
		height: 100vh;
	.scroll-h {
		display: flex;
		align-items: center;
		width: 100%;
		height: 100rpx;
		background-color: #ffffff;
	}

	.uni-tab-item {
		position: relative;
		flex: 1;
		display: inline-block;
		text-align: center;
	}

	.uni-tab-item-title {
		color: rgba($color: #000000, $alpha: 0.7);
		font-size: 28rpx;
		height: 80rpx;
		line-height: 80rpx;
		opacity: 0.7;
	}
	.uni-tab-item-text {
		position: absolute;
		bottom: 8rpx;
		left: 50%;
		transform: translateX(-50%);
		height: 4rpx;
		width: 36rpx;
		background: linear-gradient(255deg, #8dc9f1, #d8eefc);
		border-radius: 2rpx;
	}
	.uni-tab-item-title-active {
		color: #000000;
		font-size: 34rpx;
		font-weight: 600;
	}
	.uni-card {
		border-radius: 20rpx;
		.uni-card__header {
			padding: 20rpx 0;
			border-bottom: 1rpx solid #EDEDED;
			font-size: 28rpx;
			color: #000000;
			font-weight: 600;
		}
		.p-input {
			width: 100%;
		}
	}
			.swiper-fankui {
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				box-sizing: border-box;
				padding: 0 0 20rpx;
				height: 100%;
				.card {
					width: 100%;
					flex: 1;
					margin-bottom: 40rpx;
					overflow: auto;
					.c-box {
						display: flex;
						justify-content: space-between;
						align-items: center;
						.c-b-text {
							font-size: 28rpx;
							font-weight: 600;
							color: #000000;
						}
						.picker {
							display: flex;
							justify-content: flex-end;
							align-items: center;
						}
					}
					.uni-input {
						font-size: 28rpx;
						font-weight: 500;
						color: #000000;
						margin-right: 10rpx;
					}
					.uni-input1 {
						font-size: 26rpx;
						color: rgba($color: #000000, $alpha: 0.7);
					}
					.uni-easyinput__content-textarea {
						height: 300rpx;
						padding: 20rpx 0;
					}
					.uni-easyinput__placeholder-class {
						font-weight: 300;
					}
					.img {
						width: 100%;
						margin-bottom: 20rpx;
						.uni-grid-item {
							background-color: #F5F7FD;
						}
						.uni-grid-item__box {
							box-sizing: border-box;
							justify-content: center;
							align-items: center;
							padding: 20rpx;
						}
						.main-img {
							width: 100rpx;
							height: 100rpx;
							margin-bottom: 10rpx;
						}
					}
				}
				.pay-but {
					left: 0;
					width: 100%;
					height: 80rpx;
					margin-bottom: 20rpx;
					.but {
						color: #FFFFFF;
						background: linear-gradient(-90deg, #8dc9f1, #d8eefc);
						border-radius: 40rpx;
						line-height: 80rpx;
						border: 0;
						margin: 0 20rpx;
					}
				}
			}
		
}	
</style>
